<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<script>
		window.addEventListener("load", function(){
			// canvasエレメントを取得
			var canvas = document.getElementById("glcanvas");
			// canvasエレメントからWebGLのコンテキストを取得（コンテキスト名は組み込みの名前）
			var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

			if (gl) {
				// 深度テストを有効にする
				gl.enable(gl.DEPTH_TEST);
				// 深度テストをどのように行なうかを設定する
				// LEQUALは、描こうとするものの深度値が、深度バッファの深度値以下の場合のみ描画する設定
				gl.depthFunc(gl.LEQUAL);
				// コンテキストをクリアした際に塗りつぶす色を指定する
				// 引数にはRGBAの順で、それぞれ0から1までの間の値を指定
				gl.clearColor(1.0, 0.6, 0.2, 1.0);
				// コンテキストをクリアする
				// 引数にはクリアする物を論理和で指定する
				// COLOR_BUFFER_BIT は通常のバッファで、DEPTH_BUFFER_BIT は深度バッファ
				gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
			} else {
				document.write("WebGL disabled.");
			}
		});
		</script>
		<style>
		#main {
			width: 1024px;
			height: 768px;
		}
		</style>
		<title>index</title>
	</head>
	<body>
		<canvas id="glcanvas"></canvas>
	</body>
</html>
